<keira-top-bar [handler]="handlerService"></keira-top-bar>

<div class="container-fluid editor-with-preview" [ngClass]="{ 'show-preview': showItemPreview }">
  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">
    <div class="content-block">
      <keira-query-output
        [docUrl]="docUrl"
        [editorService]="editorService"
        (executeQuery)="editorService.save($event)"
      ></keira-query-output>
    </div>

    <form [formGroup]="editorService.form" class="form-group edit-form">
      <div class="content-block">
        <span class="category-title"> Miscellaneous </span>
        <div class="row">
          <div class="form-group col-12 col-sm-4 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="entry">entry</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The unique entry of the item'"></i>
            <input [formControlName]="'entry'" id="entry" type="number" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-8 col-md-8 col-lg-4 col-xl-3">
            <label class="control-label" for="name">name</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The name of the item'"></i>
            <input [formControlName]="'name'" id="name" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4">
            <label class="control-label" for="description">description</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The description that appears in orange letters at the bottom of the item tooltip.'"
            ></i>
            <input [formControlName]="'description'" id="description" class="form-control form-control-sm" />
          </div>

          <div class="form-group col-12 col-sm-5 col-md-5 col-lg-4 col-xl-3">
            <label class="control-label" for="ScriptName">ScriptName</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The name of the script that the item should use'"></i>
            <input [formControlName]="'ScriptName'" id="ScriptName" class="form-control form-control-sm" />
          </div>
        </div>

        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="class">class</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.class"
              [config]="{ options: ITEM_CLASS, name: 'class' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'class'" id="class" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="subclass">subclass</label>
            <keira-single-value-selector-btn
              *ngIf="
                editorService.form.controls.class &&
                editorService.form.controls.class.value !== null &&
                editorService.form.controls.class.value >= 0 &&
                editorService.form.controls.class.value < ITEM_SUBCLASS.length
              "
              [control]="editorService.form.controls.subclass"
              [config]="{ options: ITEM_SUBCLASS[editorService.form.controls.class.value], name: 'subclass' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The subclass meaning varies according to the item class (so the class must be set BEFORE the subclass)'"
            ></i>
            <input [formControlName]="'subclass'" id="subclass" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="SoundOverrideSubclass">SoundOverride</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Weapons have special sounds on impact, this field is used to override them sounds by specifying another subclass'"
            ></i>
            <input
              [formControlName]="'SoundOverrideSubclass'"
              id="SoundOverrideSubclass"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="displayid">displayid</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The model ID of the item. Controls both the model appearance and the icon.'"
            ></i>
            <input [formControlName]="'displayid'" id="displayid" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="Quality">Quality</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.Quality"
              [config]="{ options: ITEM_QUALITY, name: 'Quality' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'Quality'" id="Quality" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="BuyCount">BuyCount</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'The size of the item stack when sold by vendors. If a vendor has limited copies of this item available, every time the vendor list is refreshed (See npc_vendor.incrtime), the number of copies increases by this number.'
              "
            ></i>
            <input [formControlName]="'BuyCount'" id="BuyCount" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="BuyPrice">BuyPrice</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The price required to pay to buy this item from a vendor, in copper.'"
            ></i>
            <input [formControlName]="'BuyPrice'" id="BuyPrice" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="SellPrice">SellPrice</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'The price that the vendor will pay you for the item when you sell it, in copper. 0 if the item cannot be sold to a vendor.'
              "
            ></i>
            <input [formControlName]="'SellPrice'" id="SellPrice" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="InventoryType">InventoryType</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.InventoryType"
              [config]="{ options: INVENTORY_TYPE, name: 'InventoryType' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'InventoryType'" id="InventoryType" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="maxcount">maxcount</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Maximum number of copies of this item which a player can have. Use 0 for infinite.'"
            ></i>
            <input [formControlName]="'maxcount'" id="maxcount" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="stackable">stackable</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The number of copies of this item that can be stacked in the same slot.'"
            ></i>
            <input [formControlName]="'stackable'" id="stackable" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="startquest">startquest</label>
            <keira-quest-selector-btn
              [control]="editorService.form.controls.startquest"
              [config]="{ name: 'startquest' }"
              [modalClass]="'modal-lg'"
            ></keira-quest-selector-btn>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The ID of the quest that this item will start if right-clicked. See quest_template.id'"
            ></i>
            <input [formControlName]="'startquest'" id="startquest" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="Material">Material</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.Material"
              [config]="{ options: ITEM_MATERIAL, name: 'Material' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'Material'" id="Material" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RandomProperty">RandomProperty</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'Points to item_enchantment_template.entry and ties in an item’s chance at having a random property attached to it when it shows up for the first time. Cannot be non-zero if also RandomSuffix is non-zero.'
              "
            ></i>
            <input [formControlName]="'RandomProperty'" id="RandomProperty" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RandomSuffix">RandomSuffix</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'Points to item_enchantment_template.entry and ties in an item’s chance at having a random suffix attached to it when it shows up for the first time. Cannot be non-zero if also RandomProperty is non-zero.'
              "
            ></i>
            <input [formControlName]="'RandomSuffix'" id="RandomSuffix" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="BagFamily">BagFamily</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.BagFamily"
              [config]="{ flags: BAG_FAMILY, name: 'BagFamily' }"
              [modalClass]="'modal-md'"
            ></keira-flags-selector-btn>
            <input [formControlName]="'BagFamily'" id="BagFamily" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ContainerSlots">ContainerSlots</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'If the item is a bag, this field controls the number of slots the bag has.'"
            ></i>
            <input [formControlName]="'ContainerSlots'" id="ContainerSlots" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="TotemCategory">TotemCategory</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.TotemCategory"
              [config]="{ options: TOTEM_CATEGORY, name: 'TotemCategory' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'TotemCategory'" id="TotemCategory" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="duration">duration</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'The duration of the item in seconds ingame time. Set ITEM_FLAGS_CU_DURATION_REAL_TIME in flagsCustom for real time. In that case the item duration will tick even if player is offline.'
              "
            ></i>
            <input [formControlName]="'duration'" id="duration" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ItemLimitCategory">ItemLimitCat.</label>
            <keira-item-limit-category-selector-btn
              [config]="{ name: 'ItemLimitCategory' }"
              [control]="editorService.form.controls.ItemLimitCategory"
            ></keira-item-limit-category-selector-btn>
            <input [formControlName]="'ItemLimitCategory'" id="ItemLimitCategory" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="DisenchantID">DisenchantID</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The disenchant loot template ID. Corresponds to disenchant_loot_template.entry'"
            ></i>
            <input [formControlName]="'DisenchantID'" id="DisenchantID" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="FoodType">FoodType</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.FoodType"
              [config]="{ options: FOOD_TYPE, name: 'FoodType' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'FoodType'" id="FoodType" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="minMoneyLoot">minMoneyLoot</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Minimum amount of money contained in the item, in copper.'"
            ></i>
            <input [formControlName]="'minMoneyLoot'" id="minMoneyLoot" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="maxMoneyLoot">maxMoneyLoot</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'Maximum amount of money contained in the item, in copper.'"
            ></i>
            <input [formControlName]="'maxMoneyLoot'" id="maxMoneyLoot" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="itemset">itemset</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The ID of the item set that this item belongs to. Item sets are defined in the ItemSet DBC file.'"
            ></i>
            <input [formControlName]="'itemset'" id="itemset" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="bonding">bonding</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.bonding"
              [config]="{ options: ITEM_BONDING, name: 'bonding' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'bonding'" id="bonding" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-xl-6">
          <div class="content-block">
            <span class="category-title"> Flags </span>
            <div class="row">
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="Flags">Flags</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls.Flags"
                  [config]="{ flags: ITEM_FLAGS, name: 'Flags' }"
                  [modalClass]="'modal-lg'"
                ></keira-flags-selector-btn>
                <input [formControlName]="'Flags'" id="Flags" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="FlagsExtra">FlagsExtra</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls.FlagsExtra"
                  [config]="{ flags: ITEM_FLAGS_EXTRA, name: 'FlagsExtra' }"
                  [modalClass]="'modal-lg'"
                ></keira-flags-selector-btn>
                <input [formControlName]="'FlagsExtra'" id="FlagsExtra" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="flagsCustom">flagsCustom</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls.flagsCustom"
                  [config]="{ flags: ITEM_FLAGS_CUSTOM, name: 'flagsCustom' }"
                  [modalClass]="'modal-lg'"
                ></keira-flags-selector-btn>
                <input [formControlName]="'flagsCustom'" id="flagsCustom" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div class="content-block">
            <span class="category-title"> Texts </span>
            <div class="row">
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="PageText">PageText</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The ID referring to the text that the item will show (if it is a book or a letter, etc). The item will have a magnifying glass cursor in the game and will show the text when right-clicked. See page_text.entry'
                  "
                ></i>
                <input [formControlName]="'PageText'" id="PageText" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="PageMaterial">PageMaterial</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The background texture that appears in the page text window. See the PageTextMaterial DBC file for the IDs of all of the material types.'
                  "
                ></i>
                <input [formControlName]="'PageMaterial'" id="PageMaterial" type="number" class="form-control form-control-sm" />
              </div>
              <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
                <label class="control-label" for="LanguageID">Lang.ID</label>
                <keira-language-selector-btn
                  [config]="{ name: 'LanguageID' }"
                  [control]="editorService.form.controls.LanguageID"
                ></keira-language-selector-btn>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The language that the item text is written in. See the Languages DBC file for the IDs of all of the languages.'
                  "
                ></i>
                <input [formControlName]="'LanguageID'" id="LanguageID" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title"> Requirements </span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="AllowableClass">AllowableClass</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.AllowableClass"
              [config]="{ flags: ALLOWABLE_CLASSES, name: 'AllowableClass' }"
              [modalClass]="'modal-lg'"
            ></keira-flags-selector-btn>
            <input [formControlName]="'AllowableClass'" id="AllowableClass" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="AllowableRace">AllowableRace</label>
            <keira-flags-selector-btn
              [control]="editorService.form.controls.AllowableRace"
              [config]="{ flags: ALLOWABLE_RACES, name: 'AllowableRace' }"
              [modalClass]="'modal-lg'"
            ></keira-flags-selector-btn>
            <input [formControlName]="'AllowableRace'" id="AllowableRace" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ItemLevel">ItemLevel</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Base item level'"></i>
            <input [formControlName]="'ItemLevel'" id="ItemLevel" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredLevel">Req.Level</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The level required to equip the item'"></i>
            <input [formControlName]="'RequiredLevel'" id="RequiredLevel" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredSkill">Req.Skill</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The skill required to use this item. See the SkillLine DBC file for IDs which can be used here.'"
            ></i>
            <keira-skill-selector-btn
              [config]="{ name: 'RequiredSkill' }"
              [control]="editorService.form.controls.RequiredSkill"
            ></keira-skill-selector-btn>
            <input [formControlName]="'RequiredSkill'" id="RequiredSkill" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredSkillRank">Req.SkillRank</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The skill rank required to use this item.'"></i>
            <input [formControlName]="'RequiredSkillRank'" id="RequiredSkillRank" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="requiredspell">Req.spell</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The required spell that the player needs to have to use this item.'"
            ></i>
            <keira-spell-selector-btn
              [control]="editorService.form.controls.requiredspell"
              [config]="{ name: 'requiredspell' }"
              [modalClass]="'modal-lg'"
            ></keira-spell-selector-btn>
            <input [formControlName]="'requiredspell'" id="requiredspell" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="requiredhonorrank">Req.honorrank</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The honor rank required to use this item.'"></i>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.requiredhonorrank"
              [config]="{ options: PVP_RANK, name: 'PvP Honor Rank' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'requiredhonorrank'" id="requiredhonorrank" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredCityRank">Req.CityRank</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Its use is unknown. All items have 0'"></i>
            <input [formControlName]="'RequiredCityRank'" id="RequiredCityRank" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredReputationFaction">Req.Rep.Faction</label>
            <keira-faction-selector-btn
              [config]="{ name: 'RequiredReputationFaction' }"
              [control]="editorService.form.controls.RequiredReputationFaction"
            ></keira-faction-selector-btn>
            <input
              [formControlName]="'RequiredReputationFaction'"
              id="RequiredReputationFaction"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredReputationRank">Req.Rep.Rank</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.RequiredReputationRank"
              [config]="{ options: FACTION_RANK, name: 'RequiredReputationRank' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input
              [formControlName]="'RequiredReputationRank'"
              id="RequiredReputationRank"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RequiredDisenchantSkill">Req.Disenchant</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'The required skill proficiency in disenchanting that the player needs to have to be able to disenchant this item.'
              "
            ></i>
            <input
              [formControlName]="'RequiredDisenchantSkill'"
              id="RequiredDisenchantSkill"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="Map">Map</label>
            <keira-map-selector-btn [config]="{ name: 'Map' }" [control]="editorService.form.controls.Map"></keira-map-selector-btn>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The ID of the map in which this item can be used.'"></i>
            <input [formControlName]="'Map'" id="Map" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="area">area</label>
            <keira-area-selector-btn [config]="{ name: 'area' }" [control]="editorService.form.controls.area"></keira-area-selector-btn>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The ID of the zone in which this item can be used.'"></i>
            <input [formControlName]="'area'" id="area" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="HolidayId">HolidayId</label>
            <keira-holiday-selector-btn
              [config]="{ name: 'HolidayId' }"
              [control]="editorService.form.controls.HolidayId"
            ></keira-holiday-selector-btn>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'See the Holidays DBC file for the IDs of all of the holidays.'"
            ></i>
            <input [formControlName]="'HolidayId'" id="HolidayId" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="lockid">lockid</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'The lock entry ID that this item (which serves as a key) is tied to. This field is used in key-door mechanics. See the Lock DBC file.'
              "
            ></i>
            <input [formControlName]="'lockid'" id="lockid" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title">
          Resistance <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Related resistance per type.'"></i>
        </span>
        <div class="row">
          <div
            *ngFor="let resistance of ['holy', 'fire', 'nature', 'frost', 'shadow', 'arcane']"
            class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"
          >
            <label class="control-label" for="{{ resistance }}_res">{{ resistance }}_res</label>
            <input [formControlName]="resistance + '_res'" id="{{ resistance }}_res" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title"> Stats </span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-lg-4 col-xl-3">
            <label class="control-label" for="ScalingStatDistribution">ScalingStatDistribution</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'Similar to Static Stats these are the Stats that grow along with the users level (mainly heirloom leveling gear) use like static stats.'
              "
            ></i>
            <input
              [formControlName]="'ScalingStatDistribution'"
              id="ScalingStatDistribution"
              type="number"
              class="form-control form-control-sm"
            />
          </div>
          <div class="form-group col-12 col-sm-6 col-lg-4 col-xl-3">
            <label class="control-label" for="ScalingStatValue">ScalingStatValue</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Final (level 80) value of the scaling-stat.'"></i>
            <input [formControlName]="'ScalingStatValue'" id="ScalingStatValue" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-lg-4 col-xl-3">
            <label class="control-label" for="StatsCount">count</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'When an item has entries in stat_type, this must be updated to display those entries (Unknown how this works).'"
            ></i>
            <input [formControlName]="'StatsCount'" id="StatsCount" type="number" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="row">
              <div class="col-12">
                <label class="control-label" for="stat_type{{ i }}">type{{ i }}</label>
                <keira-single-value-selector-btn
                  [control]="editorService.form.controls['stat_type' + i]"
                  [config]="{ options: STAT_TYPE, name: 'stat_type' + i }"
                  [modalClass]="'modal-md'"
                ></keira-single-value-selector-btn>
                <input [formControlName]="'stat_type' + i" id="stat_type{{ i }}" type="number" class="form-control form-control-sm" />
              </div>
              <div class="col-12">
                <label class="control-label" for="stat_value{{ i }}">value{{ i }}</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The value to change the stat type to.'"></i>
                <input [formControlName]="'stat_value' + i" id="stat_value{{ i }}" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title"> Socket </span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg col-xl-5">
            <label class="control-label" for="socketBonus">socketBonus</label>
            <keira-item-enchantment-selector-btn
              [config]="{ name: 'socketBonus' }"
              [control]="editorService.form.controls.socketBonus"
            ></keira-item-enchantment-selector-btn>
            <input [formControlName]="'socketBonus'" id="socketBonus" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg col-xl-5">
            <label class="control-label" for="GemProperties">GemProperties</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'Corresponds to the ID in GemProperties.dbc.'"></i>
            <input [formControlName]="'GemProperties'" id="GemProperties" type="number" class="form-control form-control-sm" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let i of [1, 2, 3]" class="form-group col-12 col-sm-4 col-md-3 col-lg">
            <div class="row">
              <div class="col-12">
                <label class="control-label" for="socketColor_{{ i }}">Color_{{ i }}</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls['socketColor_' + i]"
                  [config]="{ flags: SOCKET_COLOR, name: 'socketColor_' + i }"
                  [modalClass]="'modal-md'"
                ></keira-flags-selector-btn>
                <input [formControlName]="'socketColor_' + i" id="socketColor_{{ i }}" type="number" class="form-control form-control-sm" />
              </div>
              <div class="col-12">
                <label class="control-label" for="socketContent_{{ i }}">Content_{{ i }}</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The amount of Gems of SocketColor_' + i"></i>
                <input
                  [formControlName]="'socketContent_' + i"
                  id="socketContent_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title"> Weapon & Armor </span>
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="armor">armor</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The armor value of the item.'"></i>
            <input [formControlName]="'armor'" id="armor" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ArmorDamageModifier">ArmorDamageModifier</label>
            <input [formControlName]="'ArmorDamageModifier'" id="ArmorDamageModifier" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="delay">delay</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The time in milliseconds between successive hits.'"></i>
            <input [formControlName]="'delay'" id="delay" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="ammo_type">ammo_type</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'The type of ammunition the item uses. Arrows = 2; Bullets = 3'"
            ></i>
            <input [formControlName]="'ammo_type'" id="ammo_type" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="RangedModRange">RangModRange</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="
                'Range Modifier for bows/guns/crossbows: Default range is somewhere between 0.3 and 0.4 yards, all blizzard ranged weapons have RangedModRange100'
              "
            ></i>
            <input [formControlName]="'RangedModRange'" id="RangedModRange" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="block">block</label>
            <i
              class="fas fa-info-circle ms-1"
              [placement]="'auto'"
              [tooltip]="'If the item is a shield, the block chance of the shield.'"
            ></i>
            <input [formControlName]="'block'" id="block" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="MaxDurability">MaxDurability</label>
            <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The maximum durability of this item.'"></i>
            <input [formControlName]="'MaxDurability'" id="MaxDurability" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <label class="control-label" for="sheath">sheath</label>
            <keira-single-value-selector-btn
              [control]="editorService.form.controls.sheath"
              [config]="{ options: ITEM_SHEAT, name: 'sheath' }"
              [modalClass]="'modal-md'"
            ></keira-single-value-selector-btn>
            <input [formControlName]="'sheath'" id="sheath" type="number" class="form-control form-control-sm" />
          </div>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title">Damage</span>
        <div class="row">
          <ng-container *ngFor="let i of [1, 2]">
            <div class="col-sm-6 col-md-4">
              <label class="control-label" for="dmg_min{{ i }}">min{{ i }}</label>
              <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The minimum damage of the item.'"></i>
              <input [formControlName]="'dmg_min' + i" id="dmg_min{{ i }}" type="number" class="form-control form-control-sm" />
            </div>
            <div class="col-sm-6 col-md-4">
              <label class="control-label" for="dmg_max{{ i }}">max{{ i }}</label>
              <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The maximum damage of the item.'"></i>
              <input [formControlName]="'dmg_max' + i" id="dmg_max{{ i }}" type="number" class="form-control form-control-sm" />
            </div>
            <div class="col-sm-6 col-md-4">
              <label class="control-label" for="dmg_type{{ i }}">type{{ i }}</label>
              <keira-single-value-selector-btn
                [control]="editorService.form.controls['dmg_type' + i]"
                [config]="{ options: DAMAGE_TYPE, name: 'dmg_type' + i }"
                [modalClass]="'modal-md'"
              ></keira-single-value-selector-btn>
              <input [formControlName]="'dmg_type' + i" id="dmg_type{{ i }}" type="number" class="form-control form-control-sm" />
            </div>
          </ng-container>
        </div>
      </div>
      <div class="content-block">
        <span class="category-title">
          Spell <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The spells that the item can cast or trigger'"></i>
        </span>
        <div class="row">
          <div *ngFor="let i of [1, 2, 3, 4, 5]" class="form-group col-12 col-sm-6 col-md-5 col-lg-4 col-xl">
            <div class="row">
              <div class="col-12">
                <label class="control-label" for="spellid_{{ i }}">id_{{ i }}</label>
                <keira-spell-selector-btn
                  [control]="editorService.form.controls['spellid_' + i]"
                  [config]="{ name: 'spellid_' + i }"
                  [modalClass]="'modal-lg'"
                ></keira-spell-selector-btn>
                <input [formControlName]="'spellid_' + i" id="spellid_{{ i }}" type="number" class="form-control form-control-sm" />
              </div>
              <div class="col-12">
                <label class="control-label" for="spelltrigger_{{ i }}">trigger_{{ i }}</label>
                <input
                  [formControlName]="'spelltrigger_' + i"
                  id="spelltrigger_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="col-12">
                <label class="control-label" for="spellcharges_{{ i }}">charges_{{ i }}</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The number of times that the item can cast the spell. If 0, then infinite charges are possible. If negative, then after the number of charges is depleted, the item is deleted as well. If positive, then the item is not deleted after all the charges are spent.'
                  "
                ></i>
                <input
                  [formControlName]="'spellcharges_' + i"
                  id="spellcharges_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="col-12">
                <label class="control-label" for="spellppmRate_{{ i }}">ppmRate_{{ i }}</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="'The proc per minute rate controlling how often the spell is triggered (if #spelltrigger == 2).'"
                ></i>
                <input
                  [formControlName]="'spellppmRate_' + i"
                  id="spellppmRate_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="col-12">
                <label class="control-label" for="spellcooldown_{{ i }}">cooldown_{{ i }}</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The cooldown in milliseconds for the specific spell controlling how often the spell can be used. Use -1 to use the default spell cooldown. Note: this is not the “internal cooldown” of procs commonly found on items such as trinkets with “Chance on hit” effects.'
                  "
                ></i>
                <input
                  [formControlName]="'spellcooldown_' + i"
                  id="spellcooldown_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="col-12">
                <label class="control-label" for="spellcategory_{{ i }}">category_{{ i }}</label>
                <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'The category that the spell is in.'"></i>
                <input
                  [formControlName]="'spellcategory_' + i"
                  id="spellcategory_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
              <div class="col-12">
                <label class="control-label" for="spellcategorycooldown_{{ i }}">categorycooldown_{{ i }}</label>
                <i
                  class="fas fa-info-circle ms-1"
                  [placement]="'auto'"
                  [tooltip]="
                    'The cooldown time in milliseconds that is applied to all other spells in the category that the triggered spell is also in. Use -1 to use the default spell cooldown.'
                  "
                ></i>
                <input
                  [formControlName]="'spellcategorycooldown_' + i"
                  id="spellcategorycooldown_{{ i }}"
                  type="number"
                  class="form-control form-control-sm"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

    <div class="preview-container" [ngClass]="showItemPreview ? 'show-preview' : 'hide-preview'">
      <perfect-scrollbar class="transparent">
        <div class="item-preview">
          <div class="icon-container">
            <keira-icon [size]="'large'" [itemDisplayId]="editorService.form.controls.displayid.value" class="icon"></keira-icon>
            <div class="item-stock-container">
              <span
                class="item-stock q1 stackable"
                *ngIf="editorService.form.controls.stackable.value > 1 && editorService.form.controls.stackable.value < 100"
                >{{ editorService.form.controls.stackable.value }}</span
              >
              <span class="item-stock q1 stackable stackable-100" *ngIf="editorService.form.controls.stackable.value >= 100">{{
                editorService.form.controls.stackable.value
              }}</span>
            </div>
          </div>

          <div class="item-stats">
            <div [innerHTML]="itemPreview"></div>
          </div>
        </div>
      </perfect-scrollbar>
    </div>

    <button class="btn btn-secondary btn-sm toggle-preview-button" (click)="showItemPreview = !showItemPreview">
      <i class="fas {{ showItemPreview ? 'fa-angle-double-right' : 'fa-angle-double-left' }}"></i>
    </button>
  </div>
</div>
